<template>
  <div id="register">
    <c-title :hide="false" :text="setTitle"></c-title>
    <div class="wrapper">
      <div class="tips">
        <span class="left-tips"></span>
        <span class="tips-text">{{ tipsText }}</span>
      </div>
      <div class="formBox">
        <van-form>
          <van-field required v-model="info.name" name="姓名：" label="姓名：" placeholder="请输入您的姓名" maxlength="10" />
          <van-field required v-model="info.mobile" name="手机号：" type="number" maxlength="11" label="手机号：" placeholder="请输入手机号" />
          <template v-if="this.$route.name == 'worker_withdraw'">
            <van-field required label-width="100px" readonly clickable name="picker" :value="info.identity_card_type" label="请选择证件类型" placeholder="请选择证件类型" @click="showPicker = true" />
            <van-field required v-model="info.identity_card_no" maxlength="20" name="证件号：" label="证件号：" placeholder="请输入证件号" />
          </template>
          <van-field required readonly clickable name="picker" :value="info.gender" label="请选择性别" placeholder="请选择性别" @click="showSex = true" v-if="this.$route.name != 'tax_withdraw_bank'"/>
          <van-field required v-model="info.identity_card_no" maxlength="20" name="身份证件号：" label="身份证件号：" placeholder="请输入身份证件号" v-if="this.$route.name == 'hJwithdrawType' || this.$route.name == 'tax_withdraw_bank'" />
          <van-field
            required
            readonly
            clickable
            name="picker"
            v-if="this.$route.name == 'worker_withdraw'"
            :value="info.birthday"
            label="请选择出生日期"
            placeholder="请选择出生日期"
            @click="showBirth = true"
          />
          <van-field required label="身份证人像面" readonly></van-field>
          <div class="card">
            <van-uploader v-model="identity_card_front" :after-read="onRead_2" :max-count="1" :deletable="true" @delete="deletePhotoFront">
              <img src="../../../assets/images/card_reverse.png" alt="" v-if="!info.identity_card_front" />
              <img :src="info.identity_card_front" alt="" v-else style="width:5rem;height:5rem;" />
              <div v-if="!info.identity_card_front" class="photo-upload">
                <img style="width: 50%;" src="../../../assets/images/camera.png" alt="" />
              </div>
            </van-uploader>
          </div>
          <van-field required label="身份证国徽面" readonly> </van-field>
          <div class="card">
            <van-uploader v-model="identity_card_backend" :after-read="afterRead" :max-count="1" :deletable="true" @delete="deletePhotoBackend">
              <img src="../../../assets/images/card_front.png" v-if="!info.identity_card_backend" />
              <img :src="info.identity_card_backend" alt="" v-else style="width:5rem;height:5rem;" />
              <div class="photo-upload" v-if="!info.identity_card_backend">
                <img style="width: 50%;" src="../../../assets/images/camera.png" alt="" />
              </div>
            </van-uploader>
          </div>
          <div class="register_type" v-if="register_type_list.length > 0 && this.$route.name == 'worker_withdraw'">
            <div class="register_type_all">
              <van-checkbox v-model="checked" shape="square" @click="checkAllHandle">全部注册</van-checkbox>
            </div>
            <van-checkbox-group v-model="register_type" direction="horizontal" ref="checkboxGroup" @change="change">
              <van-checkbox v-for="item in register_type_list" :key="item" :name="item" shape="square">{{ item == 1 ? "银行卡、支付宝" : "公众号" }}</van-checkbox>
            </van-checkbox-group>
          </div>
          <template v-if="this.$route.name == 'hJwithdrawType' || this.$route.name == 'tax_withdraw_bank'">
            <div class="detailBox">
              <div class="title">银行卡信息</div>
              <div class="detailCell">
                <van-field type="digit" v-model="bank" name="银行卡号：" label="银行卡号：" placeholder="请输入您的银行卡号" />
                <van-field v-model="bank_branch" name="银行开户行：" label="银行开户行：" placeholder="请填写银行开户行" v-if="this.$route.name == 'tax_withdraw_bank'" />
                <!-- <div class="radioCell">
                  <van-radio-group v-model="radio" direction="horizontal">
                    <van-radio name="1">招商银行</van-radio>
                    <van-radio name="2">平安银行</van-radio>
                  </van-radio-group>
                </div> -->
                <!-- <div class="tips">
                  <span class="dt">*</span>
                  若选择提现到银行卡-汇聚代发薪则必须填写银行卡信息
                </div> -->
              </div>
            </div>
            <!-- <div class="detailBox">
              <div class="title">支付宝信息</div>
              <div class="detailCell">
                <van-field v-model="alipay" name="支付宝账号：" label="支付宝账号：" placeholder="请输入您的支付宝账号" />
                <div class="tips">
                  <span class="dt">*</span>
                  若选择提现到银行卡-汇聚代发薪则必须填写支付宝信息
                </div>
              </div>
            </div> -->
          </template>
          <div class="agreement" v-if="this.$route.name == 'worker_withdraw'">
            <van-checkbox v-model="agree">我已阅读并同意</van-checkbox><span class="served-agreement" @click="show_agreement = true">《服务协议》</span>
          </div>
          <div style="margin: 16px;">
            <van-button round block type="info" :disabled="btn_disabled" :loading="btn_loading" :loading-text="btn_loading_text" color="#F00B0B" @click="onSubmit">提交</van-button>
          </div>
        </van-form>
      </div>
    </div>
    <!-- 证件号类型 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
    </van-popup>
    <!-- 出生日期  -->
    <van-popup v-model="showBirth" position="bottom">
      <van-datetime-picker v-model="currentDate" type="date" @cancel="showBirth = false" title="选择年月日" :min-date="minDate" :max-date="maxDate" @confirm="confirmBirth" />
    </van-popup>
    <!-- 性别  -->
    <van-popup v-model="showSex" position="bottom">
      <van-picker show-toolbar :columns="sexList" @confirm="onConfirmGender" @cancel="showPicker = false" v-if="this.$route.name == 'worker_withdraw'" />
      <div class="sex" v-if="this.$route.name == 'hJwithdrawType'">
        <van-dialog v-model.trim="showSex" title="请选择性别" :showConfirmButton="false" closeOnClickOverlay>
          <div slot="title" class="title">
            <div>请选择性别</div>
            <div class="iconfont icon-guanbi icon" @click="showSex = false"></div>
          </div>
          <div class="content">
            <div v-for="(item, index) in sexLIst" :key="index" style="display: flex; padding: 1.5rem 2rem;" @click="sexSwitch(index)">
              <div class="sexList">
                <img :src="item.checked == true ? item.checkedUrl : item.url" />
                <div style="margin-top: 0.5rem;" :style="item.checked == true ? 'color: #f14e4e;' : ''">{{ item.value }}</div>
              </div>
            </div>
            <span class="text">或</span>
          </div>
        </van-dialog>
      </div>
    </van-popup>
    <!-- 协议 -->
    <van-popup class="box" v-model="show_agreement">
      <div class="agreement-wrapper" v-html="desc"></div>
      <div class="agreement-close">
        <van-icon name="close" @click="show_agreement = false" />
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btn_loading: false,
      btn_disabled: false,
      btn_loading_text: "提交中..",
      checked: true,
      register_type: [], //注册支付类型
      register_type_list: [],
      showPicker: false,
      agree: false,
      columns: ["居民身份证", "港澳居民来往内地通行证", "台胞证"],
      identity_card_front: [],
      identity_card_backend: [],
      show_agreement: false, //显示协议
      showSex: false, //性别
      showBirth: false, //出生日期
      info: {
        name: "",
        mobile: "",
        identity_card_no: "",
        identity_card_type: "",
        identity_card_front: "",
        identity_card_backend: "",
        gender: "",
        birthday: ""
      },
      //性别
      sexList: ["男", "女"],
      //日期
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2025, 11, 31),
      currentDate: new Date(),
      redirect: false,
      //协议文本
      desc: "",
      // 银行卡信息
      bank: "",
      // 银行开户行信息
      bank_branch:"",
      // 支付宝信息
      alipay: "",
      // radio: "1",
      sexLIst: [
        {
          //性别选择列表
          value: "男",
          url: require("@/assets/images/sex_man.png"),
          checkedUrl: require("@/assets/images/checked_sex_man.png"),
          checked: false
        },
        {
          value: "女",
          url: require("@/assets/images/sex_girl.png"),
          checkedUrl: require("@/assets/images/checked_sex_girl.png"),
          checked: false
        }
      ],
      isMemberInto: false
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if(to.name == 'hJwithdrawType' || to.name == 'tax_withdraw_bank'){
        console.log(from.name,'name')
        if (from.name == "member" || from.name == "morePlugin") {
          vm.isMemberInto = true;
          // 如果从会员中心进入提交后留在原页面，反之回到上一个页面
        } else {
          vm.isMemberInto = false;
        }
      }
    });
  },
  activated() {
    this.init();
    if (this.$route.name == "worker_withdraw") {
      this.getData();
      this.checkAllHandle();
    } else if (this.$route.name == "tax_withdraw_bank"){
      this.taxGetData();
    }else {
      this.hJGetData();
    }
  },
  methods: {
    init() {
      this.identity_card_front = [];
      this.identity_card_backend = [];
      this.info.name = "";
      this.info.mobile = "";
      this.info.identity_card_no = "";
      this.info.identity_card_type = "";
      this.info.identity_card_front = "";
      this.info.identity_card_backend = "";
      this.info.gender = "";
      this.info.birthday = "";
      // 汇聚代发薪插件
      this.bank = "";
      this.alipay = "";
      // this.radio = "1";
    },
    change(names) {
      names.length == 2 ? (this.checked = true) : (this.checked = false);
    },
    checkAllHandle() {
      if (this.$refs.checkboxGroup) {
        this.checked ? this.$refs.checkboxGroup.toggleAll(true) : this.$refs.checkboxGroup.toggleAll(false);
      }
    },
    getData() {
      $http.get("plugin.worker-withdraw.frontend.register.page", { register_type: this.$route.params.id }).then(res => {
        if (res.result == 1) {
          this.desc = res.data.desc;
          let data = res.data.register_data;
          let register_type = res.data.register_type;
          if (data) {
            this.info.name = data.name;
            this.info.mobile = data.mobile;
            this.info.identity_card_no = data.identity_card_no;
            this.info.identity_card_front = data.identity_card_front;
            this.info.identity_card_backend = data.identity_card_backend;
            this.info.birthday = data.birthday;
            if (data.identity_card_type == "1") {
              this.info.identity_card_type = "居民身份证";
            } else if (data.identity_card_type == "2") {
              this.info.identity_card_type = "港澳居民来往内地通行证";
            } else {
              this.info.identity_card_type = "台胞证";
            }
            if (data.gender == 0) {
              this.info.gender = "女";
            } else {
              this.info.gender = "男";
            }
            this.identity_card_backend.push({ url: data.identity_card_backend_url });
            this.identity_card_front.push({ url: data.identity_card_front_url });
          }
          if (this.checked) {
            this.register_type = [1, 2];
          }
          if (register_type.length !== 0) {
            this.register_type_list = register_type;
          }
        }
      });
    },
    confirmBirth(value) {
      let date = new Date(value);
      let years = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate();
      if (month < 10) {
        month = `0${month}`;
      }
      if (day < 10) {
        day = `0${day}`;
      }
      this.info.birthday = `${years}-${month}-${day}`;
      this.showBirth = false;
    },
    afterRead(e) {
      this.uploadRead(e, "identity_card_backend");
    },
    onRead_2(e) {
      this.uploadRead(e, "identity_card_front");
    },
    uploadRead(e, type) {
      let fd = new FormData();
      fd.append("file", e.file);
      this[type][0].status = "uploading";
      this[type][0].message = "上传中...";
      axios.post(this.fun.getRealUrl("upload.uploadPic"), fd, { headers: { "Content-Type": "multipart/form-data" } }).then(res => {
        if (res.data.result == 1) {
          this[type][0].status = "done";
          this.$toast(res.data.msg);
          console.log(this.info[type])
          if(this.$route.name == "tax_withdraw_bank"){
            this.info[type] = res.data.data.img;
          }else{
            this.info[type] = res.data.data.img_url;
          }
          // console.log(this[type]);
        } else {
          this[type][0].status = "failed";
          this.$toast(res.data.msg);
        }
      });
    },
    tax_withdraw_bank_Submit(){
      let json = {
        realname: this.info.name,
        mobile: this.info.mobile,
        idcard: this.info.identity_card_no,
        idcard_front: this.info.identity_card_front,
        idcard_back: this.info.identity_card_backend,
        bank: this.bank,
        bank_branch:this.bank_branch
      };
      let text = {
        name: "请输入姓名",
        mobile: "请输入手机号",
        identity_card_no: "请输入身份证件号",
        identity_card_front: "请上传身份证(人像面)",
        identity_card_backend: "请上传身份证(国徽面)",
        bank:"请填写银行卡号",
        bank_branch:"请填写银行开户行"
      };
      for (const key in text) {
        if (this.info[key] == "") {
          return this.$toast(text[key]);
        }else if ( this.fun.isTextEmpty(this.info.identity_card_front) ){
          return this.$toast(text.identity_card_front);
        }else if ( this.fun.isTextEmpty(this.info.identity_card_backend) ){
          return this.$toast(text.identity_card_backend);
        }else if ( this.fun.isTextEmpty(this.bank) ){
          return this.$toast(text.bank);
        }else if (this.fun.isTextEmpty(this.bank_branch)){
          return this.$toast(text.bank_branch)
        }
      }
      this.btn_loading = true;
      this.btn_loading_text = "正在提交...";
      this.btn_disabled = true;
      $http.post("plugin.tax-withdraw.frontend.member-info.set", json).then(res => {
        this.btn_disabled = false;
        this.btn_loading_text = "";
        this.btn_loading = false;
        this.$toast(res.msg);
        if (res.result == 1) {
          this.$router.go(-1);
        }
      });
    },
    onSubmit() {
      // 好灵工插件
      if( this.$route.name == "tax_withdraw_bank" ){
        this.tax_withdraw_bank_Submit();
        return
      }
      if (this.$route.name == "worker_withdraw") {
        if (!this.agree) {
          return this.$toast("请勾选服务协议");
        }
        if (this.flag_type && this.register_type.length <= 0) {
          return this.$toast("请选择注册类型");
        }
        let json = {
          name: this.info.name,
          mobile: this.info.mobile,
          identity_card_no: this.info.identity_card_no,
          identity_card_front: this.info.identity_card_front,
          identity_card_backend: this.info.identity_card_backend,
          birthday: this.info.birthday,
          register_type: this.register_type.length == 2 ? [-1] : this.checked ? [-1] : this.register_type
        };
        this.info.gender == "男" ? (json.gender = 1) : (json.gender = 0);
        this.info.identity_card_type == "居民身份证"
          ? (json.identity_card_type = 1)
          : this.info.identity_card_type == "港澳居民来往内地通行证"
          ? (json.identity_card_type = 2)
          : (json.identity_card_type = 3);
        let text = {
          name: "请输入姓名",
          mobile: "请输入手机号",
          identity_card_type: "请选择身份证类型",
          identity_card_no: "请输入证件号",
          gender: "请选择性别",
          birthday: "请选择出生日期",
          identity_card_front: "请上传身份证(人像面)",
          identity_card_backend: "请上传身份证(国徽面)"
        };
        for (const key in text) {
          if (this.info[key] == "") {
            return this.$toast(text[key]);
          }
        }
        if (this.info.mobile.length < 11) {
          return this.$toast("请输入正确的手机号");
        }
        let reg = /^[\u4e00-\u9fa5]{2,6}$/;
        if (!reg.test(this.info.name)) {
          return this.$toast("请输入真实姓名");
        }
        this.btn_loading = true;
        this.btn_loading_text = "正在提交...";
        this.btn_disabled = true;
        $http.post("plugin.worker-withdraw.frontend.register.index", json).then(res => {
          this.btn_disabled = false;
          this.btn_loading_text = "";
          this.btn_loading = false;
          this.$toast(res.msg);
          if (res.result == 1) {
            if (this.$route.query.path) {
              this.$router.push(this.fun.getUrl(this.$route.query.path));
            } else {
              this.$router.push(this.fun.getUrl("member"));
            }
          }
        });
      } else {
        // 汇聚代发薪插件
        let json = {
          realname: this.info.name,
          mobile: this.info.mobile,
          idcard: this.info.identity_card_no,
          bank: this.bank,
          card_front: this.info.identity_card_front,
          card_back: this.info.identity_card_backend,
          // bank_name: this.radio == 1 ? "招商银行" : "平安银行",
          alipay: this.alipay
        };
        let text = {
          name: "请输入姓名",
          mobile: "请输入手机号",
          identity_card_no: "请输入身份证件号",
          gender: "请选择性别",
          identity_card_front: "请上传身份证(人像面)",
          identity_card_backend: "请上传身份证(国徽面)"
        };
        this.info.gender == "男" ? (json.gender = 1) : (json.gender = 0);
        for (const key in text) {
          if (this.info[key] == "") {
            return this.$toast(text[key]);
          }
        }
        if (this.info.mobile.length < 11) {
          return this.$toast("请输入正确的手机号");
        }
        const validateChineseName = (name) => {
          const regex = /^[\u4E00-\u9FA5]{2,}(?:·[\u4E00-\u9FA5]{2,})*$/;
          return regex.test(name);
        };//用于验证中国身份证姓名

        const validateXinjiangIDName = (name) => {
          // const regex = /^[\u4E00-\u9FA5]{2,}(?:[.·]{1}[\u4E00-\u9FA5]{2,})*$/;
          const regex = /^[\u4e00-\u9fa5]+·[\u4e00-\u9fa5]+$/;
          return regex.test(name);
        };//用于验证中国新疆身份证姓名
        if (!(validateChineseName(this.info.name)||validateXinjiangIDName(this.info.name))) {
          return this.$toast("请输入真实姓名");
        }
        console.log(json);
        this.postPaySet(json);
        return;
      }
    },
    onConfirm(value) {
      this.info.identity_card_type = value;
      this.showPicker = false;
    },
    onConfirmGender(value) {
      this.info.gender = value;
      this.showSex = false;
    },
    // 汇聚代发薪 插件
    postPaySet(json) {
      this.btn_loading = true;
      this.btn_loading_text = "正在提交...";
      this.btn_disabled = true;
      $http.post("plugin.consol-withdraw.frontend.member-info.set", json).then(res => {
        this.btn_disabled = false;
        this.btn_loading_text = "";
        this.btn_loading = false;
        this.$toast(res.msg);
        if (res.result == 1) {
          if (this.isMemberInto) {
            this.hJGetData();
          } else {
            this.$router.go(-1);
          }
        }
      });
    },
    taxGetData() {
      $http.post("plugin.tax-withdraw.frontend.member-info.index", {}).then(res => {
        if (res.result == 1) {
          let _data = res.data;
          this.info.name = _data.member.realname;
          this.info.mobile = _data.member.mobile;
          this.info.identity_card_no = _data.member.idcard;
          this.info.identity_card_front = _data.member?.idcard_front;
          this.info.identity_card_backend = _data.member?.idcard_back;
          this.bank = _data.bank.bank_card;
          this.bank_branch = _data.bank.bank_branch;
        }
      });
    },
    hJGetData() {
      $http.post("plugin.consol-withdraw.frontend.member-info.index", {}).then(res => {
        if (res.result == 1) {
          let _data = res.data;
          this.info.name = _data.realname;
          this.info.mobile = _data.mobile;
          this.info.identity_card_no = _data.idcard;
          this.info.gender = _data.gender == 1 ? "男" : "女";
          if (_data.gender == 1) {
            this.sexSwitch(0);
          } else {
            this.sexSwitch(1);
          }
          this.info.identity_card_front = _data?.idcard_info?.card_front;
          this.info.identity_card_backend = _data?.idcard_info?.card_back;
          this.alipay = _data.alipay;
          console.log(_data);
        }
      });
    },
    deletePhotoFront(){
      this.info.identity_card_front = '';
    },
    deletePhotoBackend(){
      this.info.identity_card_backend = '';
    },
    sexSwitch(e) {
      //性别切换
      console.log(e, this.sexList);
      this.sexLIst.forEach((item, index) => {
        if (e == index) {
          let arry = (this.sexLIst[index].checked = true);
          this.$set(this.sexLIst[index], index, arry);
          if (e == 1) {
            this.info.gender = "女";
          } else {
            this.info.gender = "男";
          }
        } else {
          let arry = (this.sexLIst[index].checked = false);
          this.$set(this.sexLIst[index], index, arry);
        }
      });
    }
  },
  computed:{
    setTitle(){
      if(this.$route.name == "hJwithdrawType"){
        return "汇聚代发薪签约"
      }else if(this.$route.name == "tax_withdraw_bank"){
        return "税筹添薪"
      }else{
        return "注册"
      }
    },
    tipsText(){
      if(this.$route.name == "hJwithdrawType"){
        return "签约信息"
      }else if(this.$route.name == "tax_withdraw_bank"){
        return "填写信息"
      }else{
        return "注册"
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.agreement {
  margin: 10px 0;
  display: flex;

  .served-agreement {
    color: #f00b0b;
  }
}

.box {
  background-color: unset;
}

.tips {
  text-align: left;
  margin-bottom: 0.625rem;
}
.formBox {
  background: #fff;
  border-radius: 0.625rem;
  // padding: 0 0.5rem;
  padding-top: 0.25rem;
}

.m-2-0-1 {
  margin: 2rem 0 1rem;
}

.p-1-0 {
  margin: 1rem 0;
}

.register_type {
  display: flex;
  margin: 1rem 0;

  .register_type_all {
    margin-right: 0.2rem;
  }
}
.detailBox {
  display: flex;
  background: #f5f5f5;
  flex-direction: column;
  .title {
    margin: 1rem 0;
    text-align: left;
  }
  .detailCell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border-radius: 0.325rem;
    padding-top: 0.3rem;
    .radioCell {
      width: 100%;
      padding: 0.325rem 0.4rem;
    }
    .tips {
      padding: 0 0.4375rem;
      font-size: 0.4375rem;
      color: #f14e4e;
    }
  }
}
.card {
  position: relative;
  text-align: left;
  padding: 10px 16px;
  background-color: #fff;

  img {
    width: 13.5rem;
  }

  .photo-upload {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4.14rem;
    height: 4.14rem;
    border-radius: 100px;
    opacity: 0.8;
    text-align: center;
    line-height: 5.14rem;
    background-color: #108ee9;
  }
}

#register {
  display: flex;
  flex-direction: column;
  align-items: baseline;

  .wrapper {
    padding: 1rem;
    width: 100%;
  }

  .left-tips {
    display: inline-block;
    width: 0.2493rem;
    height: 0.8rem;
    background-color: #f14e4e;
    border-radius: 2px;
    margin-right: 0.2613rem;
  }

  .tips-text {
    font-size: 1.15rem;
    color: #f14e4e;
  }
}

.agreement-wrapper {
  background-color: #fff;
  position: relative;
  width: 90vw;
  height: 86vh;
  padding: 0.5rem;
  overflow-y: auto;
}

.agreement-close {
  height: 10vh;
  line-height: 10vh;
  text-align: center;

  .van-icon {
    font-size: 2rem;
    color: #fff;
  }
}
.sex {
  .title {
    .icon {
      position: absolute;
      top: 1.1rem;
      right: 1.031rem;
      color: #8e8e8e;
    }
  }

  .content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    img {
      width: 3.688rem;
      height: 3.688rem;
    }

    .text {
      position: absolute;
      left: 8.625rem;
      top: 5.5rem;
      color: #d2d2d2;
      font-size: 0.8rem;
    }

    .sexList {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
  }
}
</style>
